<style lang="scss">
    .topMenu {
        .el-submenu__title i {
            color: rgba(255, 255, 255, .6);
        }
    }
</style>
<style lang="scss" scoped>

    .x-body {
        width: 100%;
        height: 100%;

        .x-header {
            position: relative;
            padding: 0 20px;
            height: 60px;
            background-color: #1890ff;
            z-index: 200;
            box-shadow: 0 1px 12px rgba(0, 0, 0, .3);
            align-items: center;

            display: flex;
            flex-direction: row;

            .logo {
                display: inline-block;
                color: white;
                vertical-align: middle;
                align-items: center;

                i {
                    font-size: 32px;
                    color: #fff;
                    vertical-align: middle;
                }

                span {
                    margin-left: 10px;
                    font-size: 24px;
                    vertical-align: middle;
                    padding-right: 10px;
                }
            }

            .collapse {
                display: inline-block;
                padding: 6px 10px 4px;
                line-height: normal;
                border-radius: 2px;
                cursor: pointer;

                i {
                    font-size: 20px;
                    color: #fff;
                }
            }

            .collapse:hover {
                background: #46A6FF;
            }

            ::v-deep .el-menu {
                padding-left: 50px;
                border-bottom: none;
                font-size: 16px;

                .el-submenu__title i {
                    color: rgba(255, 255, 255, .6);
                }

                i.iconfont {
                    color: #fff;
                }

                a {
                    text-decoration: none;
                }

                .el-menu-item i {
                    color: white;
                }
            }

            .other {
                flex: 1;
                text-align: right;
                align-items: center;
                justify-items: right;
                color: #fff;

                span {
                    display: inline-block;
                    font-size: 14px;
                    border-radius: 2px;
                    padding: 5px 15px;
                    vertical-align: middle;
                    cursor: pointer;

                    i {
                        vertical-align: middle;
                        font-size: 20px;
                    }
                }

                span:hover {
                    background: #46A6FF;
                }

                .el-dropdown-link {
                    color: #fff;
                }
            }
        }

        .x-main {
            height: calc(100% - 60px);

            .el-container {
                height: 100%;

                ::v-deep .el-aside {
                    border-right: 1px solid #efe3e5;

                    .el-scrollbar {
                        height: 100%;
                        overflow-x: hidden;
                    }

                    .el-menu {
                        overflow: hidden;
                        border-right: none;
                    }

                    .el-menu-vertical-demo:not(.el-menu--collapse) {
                        width: 200px;
                        min-height: 100%;
                    }

                    .el-tabs--left .el-tabs__header.is-left {
                        margin-right: 0;
                    }

                    .el-tabs--right .el-tabs__header.is-right {
                        margin: 0;
                    }

                    .el-tabs--left .el-tabs__nav-wrap.is-left::after, .el-tabs--left .el-tabs__nav-wrap.is-right::after, .el-tabs--right .el-tabs__nav-wrap.is-left::after, .el-tabs--right .el-tabs__nav-wrap.is-right::after {
                        width: 1px;
                    }

                    .el-menu-item,
                    .el-submenu__title {
                        height: 44px;
                        line-height: 44px;
                    }

                    .el-submenu .el-menu-item {
                        height: 34px;
                        line-height: 34px;
                    }

                    .el-menu-item.is-active {
                        background: #ecf5ff;
                    }

                    .el-submenu.is-opened ul {
                        background: #f8f8f8;
                        box-shadow: 3px 0px 0px 0px #1890ff inset;

                        li, div {
                            box-shadow: 3px 0px 0px 0px #1890ff inset;
                        }
                    }

                    .el-submenu.is-opened > .el-submenu__title {
                        color: #1890ff;

                        i {
                            color: #1890ff;
                        }

                        /*border-left: 3px solid #1890ff;*/
                        box-shadow: 3px 0px 0px 0px #1890ff inset;
                        /*background: #ecf5ff;*/
                    }

                    .el-submenu i.iconfont, .el-menu-item i.iconfont {
                        display: inline-block;
                        vertical-align: middle;
                        margin-right: 5px;
                        width: 24px;
                        text-align: center;
                        font-size: 18px;
                    }
                }

                ::v-deep .el-aside > .el-scrollbar > .el-scrollbar__wrap,
                ::v-deep .el-main > .el-scrollbar > .el-scrollbar__wrap {
                    overflow-x: hidden;
                }

                ::v-deep.el-main {
                    padding: 0px;
                    height: 100%;
                    background: #f5f7fa;

                    .page-header {
                        padding: 20px 25px;
                        background: #fff;
                        border-bottom: 1px solid #fff; //#efe3e5;
                        font-size: 14px;

                        .page-header-title {
                            display: flex;
                            flex-direction: row;

                            h1 {
                                flex: 1;
                                font-size: 18px;
                            }

                            .breadcrumb {
                                flex: 1;
                            }
                        }

                        .el-breadcrumb {
                            text-align: right !important;

                            .el-breadcrumb__item {
                                float: none;

                                .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
                                    font-weight: normal;
                                    color: #888;
                                }
                            }

                            * {
                                color: #888;
                                font-weight: normal;
                            }

                            span.el-breadcrumb__separator {
                                color: #ccc;
                            }
                        }

                        h1 {
                            text-align: left;
                            font-size: 20px;
                            margin: 0;
                            padding: 0;
                            font-weight: normal;
                        }

                        .page-header-desc {
                            line-height: 20px;
                            color: #888;
                            padding-top: 10px;
                        }
                    }

                    .container {
                        padding: 25px;
                    }

                    .tabs-bar {
                        height: 43px;
                        background: #f5f7fa;
                        border-bottom: 1px solid #DCDFE6;
                        display: flex;
                        flex-direction: row;

                        .tabs-bar-left, .tabs-bar-right {
                            width: 25px;
                            height: 43px;
                        }

                        .tabs-bar-tags {
                            flex: 1;
                            position: relative;
                            top: 0;
                            height: 44px;
                        }

                        .el-tag {
                            background: none;
                            padding: 0 12px;
                            height: 44px;
                            line-height: 44px;
                            font-size: 14px;
                            color: #888;
                            border-radius: 0px;
                            -webkit-box-sizing: border-box;
                            box-sizing: border-box;
                            border: 1px solid #f5f7fa;
                            border-bottom: 1px solid #DCDFE6;
                            white-space: nowrap;
                            cursor: pointer;
                        }

                        .el-tag:hover {
                            color: #1890ff;
                        }

                        .el-tag--success {
                            border: 1px solid #DCDFE6;
                            background-color: #fff;
                            border-bottom: 1px solid #fff;
                            border-top: 1px solid #fff;
                            /*border-top-left-radius:3px;
                            border-top-right-radius:3px;*/

                        }

                        .el-tag--success .el-tag__close {
                            color: #1890ff;
                        }
                    }
                }
            }
        }
    }

    .tabBalRightMenu {
        width: 150px;
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid #dcdfe6;
        background: #fff;
        z-index: 500;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        color: #888;

        div {

            border-bottom: 1px solid #eee;
            padding: 10px 20px;
            cursor: pointer;

            &:last-child {
                border-bottom: none;
            }

            &:hover {
                background: #ecf5ff;
            }
        }

    }
</style>

<template>
    <div class="x-body">
        <div class="x-header">
            <!--logo-->
            <a class="logo">
                <i class="iconfont icon-chanpinguanli"></i>
                <span v-if="!isCollapse">EleAdminUI</span>
            </a>
            <!--收起展开-->
            <span class="collapse" @click="collapseToggle"><i
                    :class="{'iconfont':true, 'icon-daohangshouqi-':!isCollapse, 'icon-daohangzhankai-':isCollapse}"></i></span>

            <!--顶部菜单演示，不需要就注释掉-->
            <el-menu :default-active="topMenuActiveIndex" class="el-menu-demo" mode="horizontal"
                     background-color="#1890ff" text-color="#ffffff" active-text-color="#ffffff">
                <el-menu-item index="1">顶部菜单</el-menu-item>
                <el-submenu index="2" popper-class="topMenu">
                    <template slot="title">下拉菜单</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-menu-item index="3" disabled>禁用菜单</el-menu-item>
                <el-menu-item index="4"><a href="https://element.eleme.cn/#/zh-CN/component/installation"
                                           target="_blank">ElementUI</a></el-menu-item>
            </el-menu>

            <!--右侧图标类按钮、菜单，你也可以注释掉使用上面的el-menu并调整样式右对齐，-->
            <div class="other">
                <!--通知按钮-->
                <span><i class="iconfont icon-tongzhi"></i></span>
                <!--首页按钮-->
                <span @click="$router.push('/')"><i class="el-icon-s-home"></i></span>
                <!--设置按钮-->
                <span @click="$router.push('/system/settings')"
                      v-if="$store.state.admin.permissions.indexOf('System.Config')>=0"><i
                        class="iconfont icon-setting"></i></span>
                <!--全屏按钮-->
                <span @click="handleFullScreen"><i
                        :class="!fullscreen?'iconfont icon-quanping':'iconfont icon-tuichuquanping'"></i></span>
                <!--我的 下拉菜单-->
                <el-dropdown>
                    <span class="el-dropdown-link"><i class="iconfont icon-LC_icon_user_line_1"></i> {{$store.state.admin.name}}</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="changePasswordDialogVisible=true" icon="el-icon-key">修改密码
                        </el-dropdown-item>
                        <el-dropdown-item @click.native="logout" icon="el-icon-switch-button">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="x-main">
            <el-container>

                <!--左侧菜单-->
                <el-aside :width="'auto'">
                    <el-scrollbar>
                        <!--由于三级菜单刷新页面后暂时没有解决默认展开当前页所在菜单的问题，所以现在只支持二级菜单-->
                        <el-menu router :default-active="$route.path" class="el-menu-vertical-demo"
                                 :collapse="isCollapse">
                            <template v-for="(item,index) in menus">
                                <!--一级菜单是链接-->
                                <el-menu-item :index="item.url" v-if="item.url">
                                    <i :class="item.icon" v-if="item.icon"></i>
                                    <span slot="title">{{item.name}}</span>
                                </el-menu-item>
                                <!--一级菜单是分组
                                如果是分组，则无视当前item的url，因为点击当前菜单是展开和收起功能
                                -->
                                <el-submenu :index="'menu'+index" v-if="item.children && item.children.length>0">
                                    <template slot="title">
                                        <i :class="item.icon" v-if="item.icon"></i>
                                        <span slot="title">{{item.name}}</span>
                                    </template>
                                    <el-menu-item :index="menu.url" v-for="menu in item.children">{{menu.name}}
                                    </el-menu-item>
                                </el-submenu>
                            </template>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>

                <!--主体部分-->
                <el-main>
                    <!--标签页-->
                    <div class="tabs-bar">
                        <div class="tabs-bar-left"></div>
                        <div class="tabs-bar-tags">
                            <el-tag
                                    @click="changeTab(tab)"
                                    v-for="tab in tabs"
                                    @contextmenu.native.prevent="rightClick"
                                    :key="tab.url"
                                    :closable="tab.closable"
                                    :data-tabData="JSON.stringify(tab)"
                                    :disable-transitions="false"
                                    @close="closeTab(tab)"
                                    :type="activeUrl === tab.url?'success':'info'">
                                {{tab.name}}
                            </el-tag>
                        </div>
                        <div class="tabs-bar-right"></div>
                    </div>
                    <!--标签页右键菜单-->
                    <div class="tabBalRightMenu" ref="tabBalRightMenu" v-show="tabBalRightMenuVisible">
                        <div class="closeOtherTab">关闭其它标签页</div>
                        <div class="closeLeftTab">关闭左侧标签页</div>
                        <div class="closeRightTab">关闭右侧标签页</div>
                        <div class="closeAllTab">关闭所有标签页</div>
                    </div>

                    <!--内容部分-->
                    <el-scrollbar style="height: calc(100% - 44px)">
                        <div class="main">
                            <!--页头-->
                            <div class="page-header" v-if="pagerHeader">
                                <div class="page-header-title">
                                    <h1 v-if="pagerHeader.title">{{pagerHeader.title}}</h1>
                                    <div class="breadcrumb"
                                         v-if="pagerHeader.breadcrumb && pagerHeader.breadcrumb.length>0">
                                        <el-breadcrumb separator="/">
                                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                            <el-breadcrumb-item v-for="item in pagerHeader.breadcrumb" :key="item">
                                                {{item}}
                                            </el-breadcrumb-item>
                                        </el-breadcrumb>
                                    </div>
                                </div>
                                <div class="page-header-desc" v-if="pagerHeader.desc">{{pagerHeader.desc}}</div>
                            </div>
                            <!--页面内容
                            includePageNames是缓存的标签内容，
                            凡是包含在这里面的组件都会被缓存起来，
                            当钱换到该标签页时之前的页面数据还在。
                            -->
                            <div class="container">
                                <keep-alive :include="includePageNames">
                                    <router-view v-on:closeCurrTab="closeCurrTab"></router-view>
                                </keep-alive>
                            </div>
                        </div>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </div>

        <el-dialog
                title="修改密码"
                :visible.sync="changePasswordDialogVisible"
                :close-on-click-modal="false"
                width="550px">
            <el-form :model="model" :rules="rules" label-width="100px" ref="loginForm">
                <el-form-item label="旧密码" prop="oldPassword" class="m-t-20">
                    <el-input v-model="model.oldPassword" type="password" maxlength="32" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="password">
                    <el-input v-model="model.password" type="password" maxlength="32"
                              placeholder="请输入6-32位新密码"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="confirmPassword">
                    <el-input v-model="model.confirmPassword" type="password" maxlength="32"
                              placeholder="请再次输入新密码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="changePasswordDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="changePassword">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    // @ is an alias to /src
    // import HelloWorld from '@/components/HelloWorld.vue'
    import navs from '../../scripts/navs'

    let currTab;
    export default {
        name: 'admin-layout',
        components: {
            // HelloWorld
        },
        data() {
            return {
                topMenuActiveIndex: '1',
                height: 200,
                fullscreen: false,
                isCollapse: false,

                menus: [],
                // 标签页：
                tabBalRightMenuVisible: false, //标签页右键菜单是否可见
                rightClickTab: null, // 右键点击的标签页
                activeUrl: '', //高亮显示当前页
                tabs: [
                    {name: '首页', url: '/', component: 'dashboard', closable: false}
                ],
                includePageNames: ['dashboard'], // 要缓存的组件名称，移出includePageNames则立即清除缓存， 组件名称要和路由名称一样，这里只能读路由名称，读不到组件名称


                changePasswordDialogVisible: false,
                model: {
                    oldPassword: '',
                    password: '',
                    confirmPassword: ''
                },
                rules: {
                    oldPassword: [
                        {required: true, message: '请输入旧密码', trigger: 'blur'},
                        {min: 6, max: 32, message: '请输入6-32位旧密码', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {min: 6, max: 32, message: '请输入6-32位新密码', trigger: 'blur'}
                    ],
                    confirmPassword: [
                        {required: true, message: '请输入确认密码', trigger: 'blur'},
                        {
                            validator: (rule, value, callback) => {
                                if (value !== this.model.password) {
                                    callback(new Error('两次输入的密码不一致'))
                                } else {
                                    callback()
                                }
                            }, trigger: 'blur'
                        }
                    ],
                },
            }
        },
        created() {
            //this.setLoginInfo();//判断是否登录、获取并设置登录信息

            this.initTab();
            this.listenClickEvent();
        },
        watch: {
            // 监控权限发生变化，菜单跟随改变
            '$store.state.admin.permissions': {
                immediate: true,
                deep: true,
                handler(newValue, oldValue) {
                    let myPermissions = newValue//newValue.permissions;
                    this.menus = navs.adminmenus
                        .map(x => {
                            let item = x;
                            if (x.children && x.children.length > 0) {
                                item.children = x.children.filter(i => !i.permission || myPermissions.indexOf(i.permission) >= 0)
                            }
                            return item;
                        });
                }
            },
        },
        computed: {
            pagerHeader() {
                return this.$store.state.sysPagerHeader
            },
        },
        beforeRouteUpdate(to, from, next) {
            let component = to.matched.filter(x => x.path === to.path)[0].components.default.name
            // 激活当前页
            this.activeUrl = to.path
            // 新页面就添加到标签和缓存
            if (this.tabs.filter(x => x.url === to.path).length === 0) {
                this.tabs.push({name: to.name, url: to.path, query: to.query, component: component, closable: true})
            } else {
                //更改已存在标签页的参数
                this.tabs.filter(x => x.url === to.path)[0].query = to.query;
            }
            if (this.includePageNames.filter(x => x === component).length === 0) {
                this.includePageNames.push(component)
            }
            currTab = {url: to.path, name: to.name} //只是用来关闭当前标签页
            next()
        },
        methods: {
            rightClick(e) {
                //console.log(JSON.parse(e.target.dataset.tabdata))
                this.rightClickTab = JSON.parse(e.target.dataset.tabdata)
                this.tabBalRightMenuVisible = true;
                this.$refs.tabBalRightMenu.style.left = e.pageX + 'px';
                this.$refs.tabBalRightMenu.style.top = e.pageY + 'px';
            },
            closeCurrTab(toUrl) {
                this.closeTab(currTab, toUrl)
            },
            initTab() {
                // 首次进入时设置第一个标签页（url跳转 刷新时）
                let to = this.$route
                let component = to.matched.filter(x => x.path === to.path)[0].components.default.name
                // console.log(component)
                //创建页面后，如果tabs里面没有当前页，就加进去。
                if (this.tabs.filter(x => x.url === to.path).length === 0) {
                    this.tabs.push({
                        name: to.name,
                        url: to.path,
                        query: to.query,
                        component: component,
                        closable: true
                    })
                }
                //console.log(this.tabs)

                if (this.includePageNames.filter(x => x === component).length === 0) {
                    this.includePageNames.push(component)
                }
                this.activeUrl = to.path
                currTab = {url: to.path, name: to.name} //只是用来关闭当前标签页
            },
            listenClickEvent() {
                let _this = this;
                document.onmousedown = function (event) {
                    let e = event || window.event
                    let atRightMenu = e.target.parentNode.className.indexOf('tabBalRightMenu') >= 0
                    let atTab = e.target.className.indexOf('el-tag') >= 0 && e.target.parentNode.className.indexOf('tabs-bar-tags') >= 0
                    if (e.button !== 2 && !atRightMenu) {
                        _this.tabBalRightMenuVisible = false
                    }
                    if (e.button === 2 && !atTab) {
                        //显示右键菜单
                        _this.tabBalRightMenuVisible = false
                    }
                    if (e.button === 0 && atRightMenu) {
                        let action = e.target.className;
                        if (action === 'closeOtherTab') {
                            _this.tabs = _this.tabs.filter(x => !x.closable || x.url === _this.rightClickTab.url)
                            _this.includePageNames = _this.tabs.map(x => x.component)
                            if (_this.$route.path !== _this.rightClickTab.url)
                                _this.$router.push(_this.rightClickTab.url)
                        } else if (action === 'closeLeftTab') {
                            //默认首页肯定不能关闭,所以至少要有三个标签页才能关闭左侧
                            let tab = _this.tabs.filter(x => x.url === _this.rightClickTab.url)[0];
                            let index = _this.tabs.indexOf(tab);
                            if (index > 1) {
                                _this.tabs.splice(1, index - 1)
                                _this.includePageNames = _this.tabs.map(x => x.component)
                                if (_this.$route.path !== _this.rightClickTab.url)
                                    _this.$router.push(_this.rightClickTab.url)
                            }
                        } else if (action === 'closeRightTab') {
                            let tab = _this.tabs.filter(x => x.url === _this.rightClickTab.url)[0];
                            let index = _this.tabs.indexOf(tab);
                            _this.tabs.splice(index + 1, _this.tabs.length - index + 1)
                            _this.includePageNames = _this.tabs.map(x => x.component)
                            if (_this.$route.path !== _this.rightClickTab.url)
                                _this.$router.push(_this.rightClickTab.url)
                        } else if (action === 'closeAllTab') {
                            _this.includePageNames = ['dashboard']
                            _this.tabs.splice(1, _this.tabs.length - 1)
                            _this.$router.push('/')
                        }
                        _this.tabBalRightMenuVisible = false
                    }
                }
            },
            changeTab(item) {
                if (this.$route.path + JSON.stringify(this.$route.query) !== item.url + JSON.stringify(item.query || {})) {
                    this.$router.push({path: item.url, query: item.query})
                }
            },
            closeTab(item, toUrl) {
                if (this.tabs.length === 1) {
                    this.$message.warning('最后一个标签页不能删除')
                    return
                }
                let index = this.tabs.findIndex(x => x.url === item.url)
                this.tabs.splice(index, 1)
                let index2 = this.includePageNames.findIndex(x => x === item.name)
                this.includePageNames.splice(index2, 1)
                if (toUrl) {
                    this.$router.push(toUrl)
                } else {
                    let _item = (this.tabs[index] || this.tabs[index - 1])
                    this.$router.push({path: _item.url, query: _item.query})
                }
            },
            collapseToggle() {
                this.isCollapse = !this.isCollapse
            },

            logout() {
                this.$confirm('确定要退出登录状态吗？', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.dispatch('adminLogout');
                    this.menus = [];
                    this.$router.push({path: '/login'})
                    console.log('退出后admin信息：')
                    //console.log(this.$store.state.admin)
                    this.$notify({
                        title: '退出成功',
                        message: '您已成功退出系统',
                        type: 'success'
                    })
                }).catch(() => {
                })

            },
            changePassword() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.$apis.users.updatePassword(this.model).then(res => {
                            this.loading = false;
                            if (res.success) {
                                this.$msg.notify.success('修改成功', '请重新登录')
                                this.$store.dispatch('adminLogout');
                                this.$router.push({path: '/login'})
                            } else {
                                this.$msg.alert.error(res.error.message)
                            }
                        })
                    }
                })
            },
            setLoginInfo() {
                // 未登录就去登录页面
                if (!localStorage.getItem(window.consts.strings.adminToken)) {
                    //登录地址 设置成你的地址
                    window.location.href = '/admin/login?returnUrl=' + this.$router.currentRoute.fullPath;
                    return;
                }

                window.fullScreenLoading = this.$loading({
                    lock: true,
                    text: '加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255, 255, 255, 0.9)'
                });

                this.$apis.user.getLoginInfo().then(r => {
                    window.fullScreenLoading.close();
                    if (r.success && r.result.user) {
                        this.$store.dispatch('setAdmin', {
                            id: r.result.user.id,
                            userName: r.result.user.userName,
                            name: r.result.user.name,
                            permissions: r.result.permissions || [],
                        })

                    } else {
                        this.$router.replace({path: '/login'})
                        this.$msg.alert.error(r.error.message, '获取用户信息失败')
                    }
                })
                    .catch(e => {
                        window.fullScreenLoading.close();
                    })
            },
            // 全屏事件
            handleFullScreen() {
                let element = document.documentElement
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen()
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen()
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen()
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen()
                    }
                } else {
                    if (element.requestFullscreen) {
                        element.requestFullscreen()
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen()
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen()
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen()
                    }
                }
                this.fullscreen = !this.fullscreen
            },
        }
    }
</script>
